<template>
  <div :class="format ? 'grid grid-cols-3' : '' ">
    <div class="cursor-pointer" :style="{height: height + 'px', width: width + 'px'}" :class="[format ? 'mt-2' : '']" v-for="(item,index) in pics" :key="item.originUrl"
         @click="showImg(pics,index)">
      <img class="w-full h-full" :src="item.originUrl" alt="">
    </div>
  </div>
</template>

<script setup>
// 大图展示图片
import {ImagePreview} from "vant";
import 'vant/es/image-preview/style';

const showImg = (pics, index) => {
  ImagePreview({
    images: pics.map(item => item.originUrl),
    startPosition: index,
    closeable: true,
    showIndex: false
  })
}

defineProps({
  pics: {
    type: Array,
    default: []
  },
  height: {
    type: Number,
    default: 80
  },
  width: {
    type: Number,
    default: 80
  },
  format: {
    type: Boolean,
    default: true
  }
})

</script>

<style scoped>

</style>
